<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/vue.js"></script>
</head>
<body>
    <h1>vue的入门</h1>

<!--    所有要交给Vue对象管理的页面内容，都放在这个div中-->
    <div id="app">
<!--        {{模型变量名}}  是vue的插值表达式,设置标签提内容，可以在原有内容的基础上实现数据拼接，但是模型数据中的标签会被当成字符串处理（常用）
            v-text:设置标签提内容,覆盖原始内容，模型数据中的标签会被当成字符串处理
            v-html：设置标签提内容,覆盖原始内容，但是模型数据中的标签会被当成html标签处理 （常用）
-->
        <span>原始数据：{{msg}}</span> <br>
        <span v-text="msg">原始数据：</span> <br>
        <span v-html="msg">原始数据：</span>

        <hr>
<!--
        v-bind: 绑定标签属性的，标签属性名和原来html标签属性名一致
        格式：
            v-bind:标签属性名=“模型变量名”
            :标签属性名=“模型变量名”
-->
        <a href="http://www.baidu.com">百度</a> <br>

        <a v-bind:href="loc">百度-vue</a> <br>
        <a :href="loc">百度-vue2</a>

        <hr>
<!--
        v-model: 专门给表单项标签绑定value属性的，是双向绑定
            页面表单项的value属性值用户修改后，vue对应的模型数据也会变化
            vue模型数据改变，页面表单项与之对应的value属性值也会变化
-->
        username:<input type="text" name="username" v-model="user.username">  <span style="color: red">{{user.username}}</span><br>
        password:<input type="text" name="password" v-model="user.password"> <span style="color: red">{{user.password}}</span><br>

        <hr>
<!--
        v-on： 绑定事件
        格式：对应的函数必须在Vue对象内部的methods块中
            v-on:事件名称=“函数名”
            @事件名称=“函数名”
-->
<!--        传统绑定事件方式-->
        <button onclick="fun()">点我</button> <br>
<!--        Vue绑定事件方式-->
        <button v-on:click="vueFun">点我-vue</button> <br>
        <button @click="vueFun">点我-vue2</button> <br>
        <button @click="vueFun2(user.username)">点我-vue3</button> <br>

        <hr>
<!--
        v-if/v-else-if/v-else ：根据条件控制标签是否显示
            如果条件不成立，这个元素不会创建，所以页面不显示
            如果进入页面后，一次性的显示或者隐藏元素，那么建议使用v-if进行控制
        v-show: 根据条件控制标签是否显示
            如果条件不成立，这个元素会被创建，通过样式display控制元素隐藏
            如果进入页面后，频繁切换元素的显示与隐藏，那么建议使用v-show进行控制
-->
        请输入分数：<input type="text" name="score" v-model="score"> <br>
<!--
       如果输入的分数大于90分，显示优秀
       如果大于80分，显示良好
       如果大于60，显示及格
       否则显示 不及格
-->
        <span v-if="score > 90">优秀</span>
        <span v-else-if ="score > 80">良好</span>
        <span v-else-if="score > 60">及格</span>
        <span v-else>不及格</span>
        <br>

        <span v-show="score>90">优秀-show</span>

        <hr>
<!--
        v-for: 遍历生成标签
       利用表格，显示stus中的信息
-->
        <table border="1" width="50%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
<!--
            <tr v-for="stu in stus">
                <td>{{stu.name}}</td>
                <td>{{stu.age}}</td>
                <td>{{stu.gender}}</td>
            </tr>-->

            <tr v-for="(stu,idx) in stus">
                <td>{{idx + 1}}</td>
                <td>{{stu.name}}</td>
                <td>{{stu.age}}</td>
                <td>{{stu.gender}}</td>
            </tr>
        </table>
    </div>
</body>

<script>

    function fun(){
        alert("11111")
    }

    //创建一个Vue对象， 管理页面元素
    new Vue({
        el: "#app" ,  //告诉vue管理页面的哪一部分，el的值是一个选择器
        data:{   //定义Vue对象的数据模型
            msg:"<h4>hello vue111~~</h4>",
            loc:"http://www.baidu.com",
            user:{
                username:"lisi",
                password:"123456"
            },
            score: 0,

            stus:[
                {name:"zhangsan",age:18,gender:"男"},
                {name:"lisi",age:28,gender:"男"},
                {name:"wangwu",age:28,gender:"男"},
                {name:"cuihua",age:19,gender:"女"}
            ]
        },
        methods:{
            vueFun:function (){
                // alert("22222")
                //this指的是当前的Vue对象
                alert(this.user.username)
            },
            vueFun2(val){
                alert(val)
            }
        }
    });
</script>
</html>